<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel='stylesheet' href='http://mottie.github.com/tablesorter/css/theme.blue.css'>
        <link rel='stylesheet' href='http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css'>
        <script src='http://documentcloud.github.com/underscore/underscore-min.js'></script>
        <script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
        <script src='js/libs/backbone.js-0.9.2-amdjs/backbone-min.js'></script>
        <script src='http://mottie.github.com/tablesorter/js/jquery.tablesorter.min.js'></script>
        <script src='http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js'></script>
        <script src='rest/RestClient.js'></script>
    </head>
    <body>
        <div id='create'></div>

        <table id='datatable' class='tablesorter-blue'>
        </table>
        <div class='pager' id='pager'>
            <img src='http://mottie.github.com/tablesorter/addons/pager/icons/first.png' class='first' alt='First'/>
            <img src='http://mottie.github.com/tablesorter/addons/pager/icons/prev.png' class='prev' alt='Prev'/>
            <span class='pagedisplay'></span> <!-- this can be any element, including an input -->
            <img src='http://mottie.github.com/tablesorter/addons/pager/icons/next.png' class='next' alt='Next'/>
            <img src='http://mottie.github.com/tablesorter/addons/pager/icons/last.png' class='last' alt='Last'/>
            <select class='pagesize'>
                <option selected='selected' value='10'>10</option>
                <option value='20'>20</option>
                <option value='30'>30</option>
                <option value='40'>40</option>
            </select>
        </div>
        <br>

        <div id='details'></div>


        <!-- Templates -->
        <script type='text/template' id='tpl-create'>
            <!--
                    Put your controls to create new entity here.
            
                    Class 'new' is used to listen on events in JS code.
            -->
            <button class='new'>Create</button>
        </script>

        <script type='text/template' id='thead'>
        <thead><th>manufacturerId</th>
        <th>addressline2</th>
        <th>zip</th>
        <th>phone</th>
        <th>addressline1</th>
        <th>fax</th>
        <th>email</th>
        <th>name</th>
        <th>state</th>
        <th>city</th>
        <th>rep</th>
    </thead>
</script>
<script type='text/template' id='tpl-manufacturer-list-item'>
    <td><a href='#<%= manufacturerId %>'><%= manufacturerId %></a></td>
    <td><%= addressline2 %></td>
    <td><%= zip %></td>
    <td><%= phone %></td>
    <td><%= addressline1 %></td>
    <td><%= fax %></td>
    <td><%= email %></td>
    <td><%= name %></td>
    <td><%= state %></td>
    <td><%= city %></td>
    <td><%= rep %></td>
</script>

<script type='text/template' id='tpl-manufacturer-details'>
    <div>
        <table>
            <tbody>
                <tr><td>Id</td>
                    <td>
                        <input type='text' id='manufacturerId' name='id' value='<%= typeof(manufacturerId)!== "undefined" ? manufacturerId : "" %>'  />
                    </td>
                </tr>
                <tr>
                    <td>addressline2</td><td><input type='text' id='addressline2' name='addressline2' value='<%= addressline2 %>'/></td></tr>
                <tr>
                    <td>zip</td><td><input type='text' id='zip' name='zip' value='<%= zip %>'/></td></tr>
                <tr>
                    <td>phone</td><td><input type='text' id='phone' name='phone' value='<%= phone %>'/></td></tr>
                <tr>
                    <td>addressline1</td><td><input type='text' id='addressline1' name='addressline1' value='<%= addressline1 %>'/></td></tr>
                <tr>
                    <td>fax</td><td><input type='text' id='fax' name='fax' value='<%= fax %>'/></td></tr>
                <tr>
                    <td>email</td><td><input type='text' id='email' name='email' value='<%= email %>'/></td></tr>
                <tr>
                    <td>name</td><td><input type='text' id='name' name='name' value='<%= name %>'/></td></tr>
                <tr>
                    <td>state</td><td><input type='text' id='state' name='state' value='<%= state %>'/></td></tr>
                <tr>
                    <td>city</td><td><input type='text' id='city' name='city' value='<%= city %>'/></td></tr>
                <tr>
                    <td>rep</td><td><input type='text' id='rep' name='rep' value='<%= rep %>'/></td></tr>
            </tbody>
        </table>
        <!--
                Put your controls to create new entity here.
                Classes 'save' and 'delete' are used to listen on events in JS code.
        -->
        <button  class='save'>Save</button>
        <button  class='delete'>Delete</button>
    </div>
</script>


</body>
</html>
